﻿<%@ Page Title="Monitoring" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Monitoring.aspx.cs" Inherits="LoadController.Monitoring" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <meta http-equiv="no-cache">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">



    <script type="text/javascript" src="/jQdataTables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/HighStock13/highstock.js"></script>
    <script type="text/javascript" src="/HighStock13/exporting.js"></script>       
    <script type="text/javascript" src="Monitoring.js"></script>
    <script type="text/javascript" src="poller.js"></script>

    <style type="text/css" title="currentStyle">
        @import "/jQdataTables/demo_table.css";
        table.display td.details { border: 0; padding: 0; background-color: #ccc; }
        div.innerDetails { display: none }


        #splashScreenOverlay 
        {
            position: fixed;
            z-index: 99;
            top: 50px;
            text-align:center;
            background-color: #fff;
            width: 940px;
            height: 95%;
        }
    </style>

     
    <div ID="splashScreenOverlay">		  
        <h2>Loading Result</h2>          
        <br>             
        <img  src="/images/preloader-w8-cycle-black.gif"> 
  </div>

       
    <h2 id="h2Title"></h2>

    <div id="progressbar">
        <span class="label success">
            <label id="progressValue"></label>
        </span>

        <div class="row">
            <div class="progress-bar">
                <div class="bar bg-color-yellow" id="progressbarLeft" style="width: 0%;"></div>
                <div class="bar" id="progressbarRight" style="width: 100%;"></div>
            </div>
        </div>
    </div>
                                        
                  
    <div class="row">                    
        <div class="span1">
            <label>Duration:</label>
        </div>
        <div class="span3">
            <label ID="Duration"></label>      
        </div>
        <div class="span8">
            <label>Target:</label>
            <a id="servicehref" href="#"  target="_blank"></a>     
        </div>                     
    </div>   
    
            
    <div class="row">
        <div class="span4">
            <div>
                <div class="span1">
                    <label>Started:</label>
                </div>
                <div class="span3">
                    <label id="StartedDateTime"></label>
                </div>
            </div>
            <div id="EndedDiv" style="visibility:hidden">
                <div class="span1">
                    <label>Ended:</label>
                </div>
                <div class="span3">
                    <label id="EndedDateTime"></label>
                </div>
            </div>
        </div>
        <div id="progressComponentsDiv" class="span6">
            <div class="span1">
                <div>
                    <div class="span1">
                        <label>Remaining:</label>
                    </div>
                </div>
                <div>
                    <div class="span1">
                        <label id="Remaining"></label>
                    </div>
                </div>
            </div>
            <div class="span1">
                <img width="32" height="32" style="margin: 7px;" src="/images/preloader-w8-cycle-black.gif">
            </div>
            
        </div>
    </div>

        
            
    <div class="grid">  
        <div id="panel" class="row"></div>       
    </div>


              
    <div id="chartContainer" style="height: 500px; width: 100%" ></div>

  
        
    <h2>Instances</h2>
    <table id="InstancesTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Count</th>
                <th>LastAvg</th>
                <th>Errors</th>
                <th>AvgThreads</th>
            </tr>
        </thead>
    </table>
        
    <script type="text/javascript" charset="utf-8">
            Highcharts.setOptions({                                           
                global: {
                    useUTC: true
                }
            });


            var InstancesTable = $('#InstancesTable').dataTable({
                "bSortable": false,
                "bFilter": false,
                "bInfo": false,
                "bPaginate": false
            });

            window.onload = function ()
            {
                console.log("onload");
                poll();
            }
        </script>
     





</asp:Content>